2024年版「基本的なウェブアプリケーションを構築する」のチュートリアル手順まとめてみた[Amplify Gen2対応]

こんにちは、臼田です。

みなさん、AWSのチュートリアル活用してますか？(挨拶

今回はAWSの初心者向けハンズオンコンテンツである基本的なウェブアプリケーションを構築するを2024年の現在版の手順としてまとめてみました。

このコンテンツはAWSのサーバレスなサービスを利用して、簡単にウェブアプリケーションを作成する体験ができるチュートリアルとなっており、登場するAWSの各サービスを理解するのにちょうどよい内容でした。しかし、リリースされてしばらく経っているのもあり、特に今回のAmplify Gen2リリースもあってだいぶ画面や操作方法などが変わってしまいました。

実現できる事自体は変わらないので、現時点でこのチュートリアルを初心者でも完遂できるよう、スクリーンショット多めで手順を解説します。

手順

ではやっていきましょう。基本的には基本的なウェブアプリケーションを構築するの内容を読みながら理解をしつつ、手順部分をこのブログに置き換えて進めてください。

はじめに

このチュートリアルでは以下の構成でウェブアプリケーションを作成します。最初は各構成要素についてよくわからないと思いますが、触っていくうちに少しずつ分かるので気にしなくて大丈夫です。

こういったサーバレスアプリケーションの設計パターンはこちらも参考になるので余裕があれば見ておきましょう。

以下の6つのモジュールで進んでいきます。

1. ウェブアプリケーションを作成する (5分): AWS Amplify コンソールを使用して、ウェブアプリケーションの静的リソースをデプロイします。
2. サーバーレス関数を構築する (5 分): AWS Lambda を使用してサーバーレス関数を構築します。
3. サーバーレス関数をウェブアプリケーションにリンクする (5 分): API Gateway を使用してサーバーレス関数をデプロイします。
4. データテーブルを作成する (10 分): Amazon DynamoDB テーブルにデータを保持します。
5. ウェブアプリケーションに対話性を追加する (5 分): ウェブアプリケーションを変更して API を呼び出します。
6. リソースをクリーンアップする (5 分): このチュートリアルで使用したリソースをクリーンアップします。

モジュール1: ウェブアプリケーションを作成する

このモジュールではAWS Amplifyを利用してウェブアプリケーションのフロントエンドを構築します。と言っても、簡単な静的ウェブサイトです。チュートリアルの文章をよく読み理解してから始めましょう。特にチュートリアルの「主要な概念」に出てくる用語を確認しておきましょう。

まずは自身のPCなどローカル環境で適当なテキストエディタ(メモ帳しか使ってないよという人は、VSCodeを使ってみるのもいいかもしれません)を開いてチュートリアルにあるHTMLをコピペしてindex.htmlとして保存します。

保存したら右クリック等からZIPファイルに圧縮します。

それではAWSマネジメントコンソールを開いて、Amplifyのコンソールを開きましょう。チュートリアルではオレゴン(us-west-2)リージョンを使用していますが、東京(ap-northeast-1)を使用しても問題ありません。今回私は東京リージョンで実施しています。AmplifyコンソールはAWSマネジメントコンソール上部の検索欄から「amplify」と入力して開くと手っ取り早いでしょう。

Amplifyコンソールを開くと以下のようになっています。この画面は最近Amplify Gen2となったことで大きく変わっています。が、まあできることは割と一緒だと思って画面が変わっているだけと思いながら手順を進めましょう。「新しいアプリを作成」を押します。

「Gitなしでデプロイ」を選択して「次へ」進みます。

ZIPファイルをドラッグアンドドロップするエリアがあるので、ファイルを選択するかドラッグアンドドロップで先程のindex.htmlをZIPで圧縮したファイルをアップして「保存してデプロイ」します。

少しするとデプロイが完了し、ドメインが発行されURLからアクセスできるようになります。この素早くアプリケーションをインターネット上にデプロイして利用できるようにしてくれるのがAmplifyのいいところです。

ではウェブアプリをテストするためにドメインをクリックしてブラウザで表示します。

「Hello World」が表示され、先程アップロードしたindex.htmlがデプロイされていることが確認できました。

AmplifyがHTMLファイルをアップロードしたら、ウェブサイトを配信するための残りの必要な作業は全部やってくれたということです。

モジュール 2: サーバーレス関数を構築する

このモジュールでは裏側で動作するプログラムを記述します。利用するサービスはAWS Lambdaです。チュートリアルの文章をよく読み理解してから始めましょう。このチュートリアルでは使用するプログラミング言語をPython、JavaScript、Javaから自由に選択できます。今回の手順ではPythonを利用しています。

まずはLambda関数を作成します。AWS Lambdaの実態(実際に作られるリソース)は関数(Function)と呼びます。

AWSマネジメントコンソールの検索欄から「lambda」と検索してAWS Lambdaのコンソールを開きましょう。「関数の作成」を開始します。

「一から作成」になっている状態で関数名にHelloWorldFunctionを入れてランタイムを「Python 3.8」にします。手順にある名前やパラメータなどは手動で入力すると間違いの元ですから、必ずコピーペーストしましょう。大文字・小文字なども間違えてはいけませんからね。

他の設定は変更せず「関数の作成」をします。

作成されたら少し下にスクロールすると「コードソース」でテンプレートのコードが書かれています。これをチュートリアルにあるコードをコピーしてすべて置き換えます。置き換えたら上部の「Deploy」ボタンを押します。

デプロイで来たらテストを実行していきます。Lambdaのコンソール上ではテストを作成開始する方法が2つありますが、今回は上部の「テスト」タブを開いてテストを作成します。イベント名にHelloWorldTestEvent、イベントJSONにチュートリアルのJSONオブジェクトを貼り付け、「保存」します。

保存できたら隣の「テスト」ボタンを押します。するとその上側に実行した結果が表示され、枠が緑色なら正常に完了しています。「詳細」をクリックして開き、ステータスコードが200になっていることと、bodyのメッセージ内容を確認します。

アプリケーションコードを実行する環境が自動的に作成され、言語を記述するだけで利用することができました。

モジュール 3: サーバーレス関数をウェブアプリケーションにリンクする

アプリケーションコードを実装しましたが、これだけだとインターネット上からアプリケーションを実行できません。インターネットからリクエストを受け付けるためにAPI Gatewayを作成します。RESTful APIなどの概念の説明はチュートリアルをよく確認してください。

API Gatewayのコンソールも検索欄から探して開きましょう。いくつかのAPIの種類が選択できますが、REST APIを「構築」します。すぐ下に「REST API プライベート」があるので間違えないようにしましょう。

「新しいAPI」が選択されていることを確認しつつ、API名にHelloWorldAPIを入力し、APIエンドポイントタイプで「エッジ最適化」を選択して「APIを作成」します。

APIを作成できたらメソッドを作成します。リソースページの左カラムで「/」が青く選択されていることを確認し、右下「メソッドを作成」します。

メソッドタイプ「POST」を選択し、統合タイプに「Lambda関数」が選択されていることを確認します。Lambda関数を選択するテキストボックスにHelloWorldFunctionを入力すると、先ほど作成した関数が表示されますのでこれを選択します。下の方に行き保存します。

保存できたらCORSの設定を行います。リソースページの左カラム「/」を選択して戻り、右側の「CORSを有効にする」を押します。

「POST」にチェックを入れて「保存」します。

設定できたので「APIをデプロイ」します。

API Gatewayでは複数のステージを作成して、開発中の環境と本番に展開する環境を分けるなど、開発に便利な使い方ができます。今回は最初なのでステージで「新しいステージ」を選択し、ステージ名をdevとして「デプロイ」します。

デプロイが完了したら、後でアプリケーションに組み込むためにステージのURLをコピーボタンを押して適当な場所にメモとして残しておきます。

デプロイしたAPIをテストします。左カラム「リソース」からリソースページに戻ってきて、POSTメソッドを開きます。

下の「テスト」タブを開き、リクエスト本文にチュートリアルにあるJSONオブジェクトをコピーして貼り付け「テスト」します。

テストに成功すると、ステータスが200になり、先程Lambda関数単体で実行した結果と同じように、今度はGrace Hopperとして処理されます。

これでインターネットからAPI Gatewayを通してアプリケーションコードを実行できるようになりました。

モジュール 4: データテーブルを作成する

アプリケーションで実行した処理の結果などはデータベースに保存して活用したいです。AWSのサーバレスアプリケーションではDynamoDBを利用することで簡単にNoSQLデータベースを組み込むことができます。詳細はチュートリアルの概要等を確認してください。

AWSマネジメントコンソール上でDynamoDBのコンソールを検索して開きます。「テーブルを作成」開始します。

テーブル名にHelloWorldDatabaseを、パーティションキーにIDを入力します。ここも必ずコピーペーストしましょう。よくidのように小文字にしてハマります。下の方に行き「テーブルの作成」をします。

作成して少しすると、テーブル名をクリックして詳細画面を表示できるようになります。開きましょう。

「追加情報」を開くとAmazonリソースネーム(ARN)を確認できるので左のコピーボタンを押して、メモしておきます。

テーブルが作成できたら、Lambda関数からテーブルにデータを保存できるようにします。AWSのリソースはデフォルトではリソース間のやりとりは許可されていません。そのため、Lambda関数からDynamoDBのテーブルへのアクセスを許可する設定をしていきます。ちなみにAPI GatewayとLambda関数の間の設定は、先程の手順の中で自動的に設定されていました。

Lambda関数の画面に戻り、「設定」タブの「アクセス権限」カラムを開き、実行ロールと書かれている部分のIAM Role名のリンクをクリックします。

すると、Lambda関数を作成するときに一緒に自動作成されたIAM Roleが開きます。Lambda関数に権限を与えるときは、各Lambda関数にアタッチするIAM Roleに権限を与えていきます。許可ポリシーで「許可を追加 -> インラインポリシーを作成」します。

ポリシーエディタで「JSON」での入力に切り替えてチュートリアルにあるJSONオブジェクトをコピペします。15行目の「YOUR-TABLE-ARN」となっている部分を、書き込み先のDynamoDBのARNに置き換えます。両隣のダブルクォーテーション(")などを消さないように気をつけて置き換えたら「次へ」進みます。

ポリシー名にHelloWorldDynamoPolicyを入力して「ポリシーの作成」をします。

作成できたらアプリケーションコードをDynamoDBと連携するものに変更します。気になる人はコードの中身も読んでみましょう。Lambda関数の画面に戻り「コード」タブを開き、チュートリアルのコードをコピーして、すべて置き換えます。「Deploy」しましょう。

「テスト」タブに切り替えて「テスト」します。先ほどと同じように緑になり200のステータスになればOKです。

今度はDynamoDBテーブルにも書き込みができているはずなので確認します。テーブルの詳細画面に戻り、右上の「テーブルアイテムの探索」を押します。

下の方にテーブルに保存されたデータが表示されます。Lambda関数のテストで入力した「Ada Lovelace」が表示されたらOKです。

これでLambda関数で実行した内容がDynamoDBテーブルに保存されるようになりました。

モジュール 5: ウェブアプリケーションに対話性を追加する

最後に、Amplifyで配信したフロントエンドをAPI Gatewayから始まるバックエンドに接続して完成です。チュートリアルの内容をよく確認して始めましょう。

ローカル環境でindex.hemlをチュートリアルのコードに置き換えます。41行目の「YOUR-API-INVOKE-URL」は先ほど控えたAPI GatewayのステージのURLに置き換えましょう。前後のダブルクォーテーションやその他の処理を消さないように気をつけましょう。

置き換えたら、先程と同じ手順で保存しZIPにして、Amplifyにデプロイします。Amplifyコンソールで「アップデートをデプロイ」します。

ドラッグアンドドロップでZIPをアップロードし「保存してデプロイ」します。

少しするとデプロイが完了するので、ブラウザでドメインを開きます。

すると先ほどと違って更新したHTMLが表示されます。適当な名前を入力して「Call API」を実行しましょう。

ポップアップウィンドウでバックエンドで実行された結果が返ってきます。入力した名前が表示されていたら正常に完了しています。「OK」を押して閉じましょう。

データベース側も確認してみます。「テーブルアイテムの探索」画面で更新ボタンを押すと、フロント側で入力した名前が保存されていることが確認できました。

適切にフロントエンドからバックエンドまで一通り繋げて、1つのウェブアプリケーションとして構築できました。

モジュール 6: リソースをクリーンアップする

作ったら消すまでがチュートリアルです。ほとんど無料枠で完結するはずですが、終了したら速やかに削除しましょう。またすぐに構築できますからね。

DynamoDBはテーブル一覧の画面からチェックを入れ「削除」します。

確認画面では一緒に作成されたアラームの削除にチェックが入っていて、バックアップ作成はチェックが外れている状態のはずです。そのままにして「確認」と入力し「削除」します。

API Gatewayは右上「APIアクション -> APIを削除」から実行します。

「確認」を入力して「削除」します。

Lambda関数は右上「アクション -> 関数を削除」から実行します。

確認がでるので「削除」します。

Lambda関数のIAM Roleは詳細画面右上「削除」から実行します。

確認がでるのでIAM Role名を貼り付けて「削除」します。

Amplifyアプリケーションは「アプリケーションの設定 -> 全般設定」の右下で「アプリの削除」します。

フィールドには現状「delete」と入力することで「アプリの削除」ができました。

まとめ

AWSのサーバレスサービスを利用して基本的なウェブアプリケーションを構築するチュートリアルを行いました。

EC2やRDSなど自分で必要なリソースを作成して設定をしていく手法も良いですが、サーバレスなサービスを使えばより簡単にAWSにいろいろなものを任せて仕組みを作ることができます。

この利便性を体験し、やりたいことを実現する手段を身につけましょう。